<script setup>
    import GoodsItem from '@/views/Home/components/GoodsItem.vue'
    import {getHotGoods} from '@/network/detail.js'
    import {ref, onMounted} from 'vue'
    import {useRoute} from 'vue-router'

    const route = useRoute()
    const hotData = ref([])
    const getHot = async () => {
        const res = await getHotGoods({
            id: route.params.id,
            type: props.hotType,
        })
        // console.log(res);
        hotData.value = res.result
    }

    onMounted(() => {
        getHot()
    })

// 接受参数props 根据props渲染数据 

   const props =  defineProps({
            hotType: {
                type: String,
                default: ''
            }
            
        })
// 标题
// 适配title 1-24小时热榜 2-周热榜
    const titleArr = {
        1: '24小时热榜',
        2: '周热榜'
    }
    const title = computed(() => {
                return titleArr[props.hotType]
            })
            // console.log(title);
</script>


<template>
    <div class="goods-hot">
        <h3>{{title}}</h3>
        <goods-item v-for="item in hotData" :key="item.id" :good="item"></goods-item>
    </div>
    
</template>


<style scoped lang='scss'>
    .goods-hot{
        h3{
            height: 70px;
            line-height: 70px;
            background: $helpColor;
            padding-left: 25px;
            color: #fff;
            font-size: 18px;
            font-weight: normal;
            margin-bottom: 10px;
        }
        .good-item{
            background: #fff;
        }
    }
</style>